<template>
  <el-dialog v-model="show" width="1000px" title="订单详情" append-to-body :close-on-click-modal="true">
    <div>
      <h3>{{ hotel.name }}<span>({{ starLevel[ hotel.starLevel ] }})</span></h3>
      <p>酒店地点：{{ hotel.address }}</p>
      <p>酒店电话：{{ hotel.contact }}</p>
      <p>{{ hotel.label }}</p>
      <p v-html="hotel.introduction" />
    </div>
    <el-row>
      <el-col :span="12">
        <h3>{{ orderInfo.roomType }}</h3>
        <p>{{ orderInfo.bedInfo }}</p>

        <p>入住人：{{ roomInfo.rzUsers }}</p>
        <p>房间数：{{ roomInfo.roomNum }}</p>
        <p>预计到店：{{ roomInfo.ddDate }}</p>
        <p>联系电话：{{ roomInfo.phone }}</p>
        <p>入住时间：{{ roomInfo.rzStart }} 至 {{ roomInfo.rzEnd }}</p>
        <p v-if="roomInfo.isAddbed=='1'">加床张数：{{ roomInfo.addNum }}</p>
        <p v-if="roomInfo.isAddbed=='1'">加床单价：¥ {{ orderInfo.bedPrice?.toFixed(2) }}</p>
      </el-col>
      <el-col :span="12">
        <h3>费用明细</h3>
        <dl>
          <dt>房费
            <span>¥ {{ (roomInfo.usedays*roomInfo.roomNum*orderInfo.price).toFixed(2) }}</span>
          </dt>
          <dd v-for="(c,i) in choseRooms" :key="i">
            {{ c }}
          </dd>
        </dl>
        <dl v-if="roomInfo.addNum>0">
          <dt>加床费
            <span>¥ {{ (roomInfo.usedays*roomInfo.roomNum*orderInfo.bedPrice).toFixed(2) }}</span>
          </dt>
          <dd v-for="(c,i) in choseRooms" :key="i">
            {{ c }}
          </dd>
        </dl>
        <dl>
          <dt>共计<span>¥ {{ orderInfo.total?.toFixed(2) }}</span></dt>
        </dl>
      </el-col>
    </el-row>

    <el-row style="background: #f8f8f8;padding: 10px">
      <el-col :span="12">
        <p>订单编号：{{ orderInfo.orderId }}</p>
        <!--        <p>下单账号：{{orderInfo.id}}</p>-->
        <!--        <p>下单时间：{{orderInfo.id}}</p>-->
        <!--        <p>付款账号：{{orderInfo.payId}}</p>-->
      </el-col>
      <el-col :span="12">
        <p v-if="orderInfo.status=='1'">付款时间：{{ orderInfo.payDate }}</p>
        <p v-if="orderInfo.status=='1'">付款方式：<span>{{ orderInfo.paymentTypeStr }}</span></p>
        <!--        <p>交易流水号：{{orderInfo.id}}</p>-->
        <p>订单状态：
          <!-- 0  未支付  1  支付成功   2  已取消  3  已退订 -->
          <span v-if="orderInfo.status=='0'">未支付</span>
          <span v-if="orderInfo.status=='1'||orderInfo.status=='5'" class="text-success">支付成功</span>
          <span v-if="orderInfo.status=='2'" class="text-warning">已取消</span>
          <span v-if="orderInfo.status=='3'||orderInfo.status=='4'" class="text-danger">已退订</span>
          <span v-if="orderInfo.status=='7'" class="text-warning">退款审核中</span>
        </p>

      </el-col>
      <el-col :span="24">
        <p>备注：{{ orderInfo.remarks||'无' }}</p>
      </el-col>
    </el-row>

  </el-dialog>
</template>

<script setup>
import { ref } from 'vue'
import { getRoomOrderInfoByOrderId } from '@/api/logex/order'

const show = ref(false)
const hotel = ref({})
const roomInfo = ref({})
const orderInfo = ref({})
const choseRooms = ref([])
const starLevel = ref(['无星级', '一星级', '二星级', '三星级', '四星级', '五星级', '六星级', '七星级'])

function open(order) {
  getRoomOrderInfoByOrderId(order.id).then(res => {
    orderInfo.value = res.data
    roomInfo.value = JSON.parse(res.data.extJson)
    hotel.value = {
      name: orderInfo.value.hotelName,
      starLevel: orderInfo.value.starLevel,
      address: `${orderInfo.value.provinceName}${orderInfo.value.cityName}${orderInfo.value.areaName || ''} ${orderInfo.value.address}`,
      contact: orderInfo.value.contact,
      label: orderInfo.value.label,
      introduction: orderInfo.value.introduction
    }

    getDaysBetween()
  })

  show.value = true
}
let usedays
function getDate(datestr) {
  var temp = datestr.split('-')
  if (temp[1] === '01') {
    temp[0] = parseInt(temp[0], 10) - 1
    temp[1] = '12'
  } else {
    temp[1] = parseInt(temp[1], 10) - 1
  }
  var date = new Date(temp[0], temp[1], temp[2])
  return date
}
function getDaysBetween() {
  var d1 = Date.parse(roomInfo.value.rzStart.substring(0, 10))
  var d2 = Date.parse(roomInfo.value.rzEnd.substring(0, 10))
  if (d1 > d2) {
    usedays = 0
  }
  if (d1 == d2) {
    usedays = 1
  }
  var days = (d2 - d1) / (1 * 24 * 60 * 60 * 1000)
  usedays = days

  var startTime = getDate(roomInfo.value.rzStart.substring(0, 10))
  var endTime = getDate(roomInfo.value.rzEnd.substring(0, 10))
  var dateArr = []
  while ((endTime.getTime() - startTime.getTime()) > 0) {
    var year = startTime.getFullYear()
    var month = (startTime.getMonth() + 1).toString().length === 1 ? '0' + (parseInt(startTime.getMonth().toString(), 10) + 1) : (startTime.getMonth() + 1)
    var day = startTime.getDate().toString().length === 1 ? '0' + startTime.getDate() : startTime.getDate()
    dateArr.push(year + '-' + month + '-' + day)
    startTime.setDate(startTime.getDate() + 1)
  }
  choseRooms.value = dateArr
  roomInfo.value.usedays = usedays
}
defineExpose({
  open
})

</script>

<style scoped lang="scss">
dt{font-size: 16px;display: flex;justify-content: space-between;width: 50%;}
dd{display: flex;justify-content: space-between;width: 50%;}
</style>
